<template>
  <div class="personal">
    <el-card>
      <el-container>
        <!--左边菜单栏-->
        <el-aside width="180px">
          <div class="page-title">个人中心</div>
          <!--个人空间选项-->
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            mode="vertical"
            router
          >
            <!--首页-->
            <el-menu-item index="/personal/home">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <!--我的信息-->
            <el-menu-item index="/personal/myInfo">
              <i class="el-icon-user-solid"></i>
              <span slot="title">我的信息</span>
            </el-menu-item>
            <!--我的头像-->
            <el-menu-item index="/personal/myAvatar">
              <i class="el-icon-touxiang"></i>
              <span slot="title">我的头像</span>
            </el-menu-item>
            <!--我的硬币-->
            <el-menu-item index="/personal/myCoin">
              <i class="el-icon-icon"></i>
              <span slot="title">我的硬币</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!--右边内容-->
        <el-container>
          <el-header>{{ activeTitle }}</el-header>
          <el-main>
            <transition name="el-fade-in-linear" mode="out-in">
              <keep-alive>
                <router-view></router-view>
              </keep-alive>
            </transition>
          </el-main>
        </el-container>

      </el-container>
    </el-card>
  </div>
</template>

<script>
export default {
  computed: {
    activeIndex () {
      return this.$route.path
    },
    activeTitle () {
      return this.$route.meta.title
    }
  }
}
</script>

<style scoped lang="less">
.personal {
}

.el-card {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid #e2e2e5;

  .el-aside {
    background-color: @gray;
    border-right: 1px solid #e2e2e5;
    min-height: 600px;

    ::selection {
      background: none;
    }

    .page-title {
      height: 56px;
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      border-bottom: 1px solid #e2e2e5;
    }

    .el-menu-item {
      background-color: @gray;
    }

    .el-menu-item:hover {
      background-color: @gray-p;
    }
  }

  .el-header {
    height: 57px !important;
    border-bottom: 1px solid #e2e2e5;
    line-height: 56px;
    color: @menuColor;
  }
}

</style>
